<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>axios</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    </head>
    <body>
        <button>GET</button>
        <button>POST</button>
        <button>DELETE</button>
        <button>PUT</button>
        <hr />
        <button>async 与 await</button>
        <hr>
        <button>axios 字符串参数</button>

        <script>
            //获取按钮
            let btns = document.querySelectorAll("button");

            //发送 GET 请求
            btns[0].onclick = function () {
                //发送 AJAX 请求  axios 函数调用的返回值是 promise 对象
                // axios 函数中的参数就是『配置对象』
                axios({
                    //请求属性
                    //请求类型
                    method: "get",
                    //请求 URL
                    url: "http://127.0.0.1:8023/server",
                    //请求头
                    headers: {
                        a: 100,
                        b: 200,
                    },
                }).then(
                    (response) => {
                        console.log(response);
                    },
                    (error) => {
                        console.log(error);
                    }
                );
            };

            //发送 POST 请求
            btns[1].onclick = function () {
                axios({
                    //请求类型
                    method: "post",
                    //URL
                    url: "http://127.0.0.1:8023/server",
                    //设置 查询字符串
                    params: {
                        e: 500,
                        f: 600,
                    },
                    //请求头
                    headers: {
                        a: 100,
                        b: 200,
                    },
                    //请求体 JSON
                    // data: {
                    //     c: 300,
                    //     d: 400
                    // }
                    //请求体 form-data
                    data: "c=300&d=400",
                }).then((response) => {
                    console.log(response);
                });
            };

            //发送 DELETE 请求
            btns[2].onclick = function () {
                axios({
                    method: "delete",
                    url: "http://127.0.0.1:8023/server",
                }).then((res) => {
                    console.log(res);
                });
            };

            //发送 PUT 请求
            btns[3].onclick = function () {
                axios({
                    method: "patch",
                    url: "http://127.0.0.1:8023/server",
                }).then((res) => {
                    console.log(res);
                });
            };

            //async   *******************
            btns[4].onclick = async function () {
                try {
                    let result = await axios({
                        method: "get",
                        url: "http://127.0.0.1:8023/server",
                    });
                    //这里是请求成功的位置
                    console.log(result);
                } catch (e) {
                    //这里是请求失败的位置 
                    console.log('请求失败');
                }
            };
        
            //axios 字符串参数
            btns[5].onclick = async function(){
                //发送的是 GET 请求
                let result = await axios('http://127.0.0.1:8023/server', {
                    //配置对象
                    params: {
                        a: 100,
                        b: 200
                    }
                });
                console.log(result);
            }
        </script>
    </body>
</html>
